<template>
  <div>vue2组件</div>
  <p>data中的数据 ：{{ msg }}</p>
  <p>数字 ：{{ num }}</p>
  <p>数组 ：{{ list }}</p>
  <p>data中的数据是对象{{ user }}</p>
  <p>computed的使用 ：{{ like }}</p>
  <button @click="handleClick">修改</button>
  <p>watch的使用 ：<input type="text" v-model="msg" /></p>
  <!-- <p>filter的使用 ：{{ Data.now() | dateFormat() }}</p> -->
</template>

<script>
export default {
  // vue2组件中的数据写在data函数中
  // vue2面试题 ：为什么data要是一个函数？
  // vue2组件里的数据都是存放在data中的，如果写成对象，对象是引用数据类型，每个组件里都是data，那么所有组件会公用一份data，会有变量污染的风险，如果写成一个返回对象的函数，那么每个组件内部data都会生成一个独立的对象，这样就不会有变量污染的风险
  data() {
    return {
      msg: 'hi baby',
      num: 1,
      list: ['jay', 'joLin'],
      user: {
        name: 'zs',
        // age:0
      },
    }
  },
  // 计算属性：使用场景和vue3一样。数据依赖。
  // 使用场景 ：页面中某个数据依赖于其他数据产生，并且这个数据不需要频繁计算 ，这个时候可以使用计算属性
  // 计算属性有一个参数为组件的实例，在函数内部也可以使用this来代表组件实例，推荐使用参数实例，这样减少了作用域链的查找过程，节约性能
  computed: {
    like(props) {
      console.log(props, this)

      return props.list.map((v) => `我喜欢${v}`)
    },
  },
  // watch：侦听器：使用场景和vue3一样
  // 使用场景 ：监听输入框，只要变化就发送异步请求
  watch: {
    msg(newValue, oldValue) {
      console.log('msg变化')
      console.log('新值'+ newValue)
      console.log('旧值'+ oldValue)
    },
  },
  // 过滤器
  // 在vue2中对于一些难以理解或者不能理解的数据进行翻译
  // vue3不能使用
  // 面试题：在vue中，filter、computed、watch三者的异同点和使用场景？
  // filter：过滤器。把页面中不认识的数据（状态码、时间戳）翻译成认识的数据，把数据转换成另一种显示形式
  // computed：计算属性。被动监听，依赖缓存，同步操作。根据已经有的数据计算出新的数据（总价），并渲染到页面上
  // watch：侦听器。主动侦听，侦听指定数据的变化，在数据变化时做出相应的处理（异步请求）
  // filters: {
  //   dateFormat(val) {
  //     return Data.now(val).getYear()
  //   },
  // },
  // vue2中的方法写在methods里
  methods: {
    handleClick() {
      // this代表当前组件的实例
      // console.log(this);
      this.msg = 'i love you'
      this.num++
      // vue2面试题 ：通过数组的索引、length属性修改元素不会更新视图（丢失响应式）
      // 解决方法 ：vue2使用vue提供的set方法  Vue.set或this.$set
      // vue.set（修改的数据，修改的索引，修改的值）
      this.list[1] = 'jj'
      // vue2面试题：给对象动态添加属性，该属性不是响应式
      // 答：使用set方法,Vue.set(对象，添加的属性，添加的属性值)，还有一个更简单的方法就是直接把添加的属性写在data中，给一个初始值，因为在vue2中data中的数据都会被劫持
      // vue3中不存在这个问题，因为底层使用的是proxy，代理的是整个对象
      this.user.age = 12
    },
  },
}
</script>
<style></style>
